<!--代币兑换页面-->
<template>
	<view class="box_b_content">
		<c-layout>
			<c-navigation-bar slot="head" style="background: linear-gradient(to right, #9AAFF8, #8CA6FF);"
				:title="$t('user.coinChange')" @backEvent="goBack" navbar-bg-color="#9AAFF8" left-icon-color="#fff"
				title-color="#fff" />
			<view class="box_content">
				<!--   输入密码弹框   -->
				<inputPayPassword @finish="payPwdPopFinish" :payPwdPopShow.sync="payPwdPopShow"
					:amount="(calcNeedMoney)" :maxlength="6" @close="pwdclose" />

				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="box_top">
						<view
							style="background: linear-gradient(to right, #9AAFF8, #8CA6FF);;width: 100%;height: 40rpx" />
						<!--    当前代币和个人余额布局      -->
						<view class="back_card_total">
							<view class="box_current_coin">
								<text class="text_money_tips">
									{{ $t('user.currentCoin') }}<span style="font-weight: bold;margin-left: 20rpx">
										{{ accountGold }}</span>
								</text>
							</view>
							<view class="user_has_money">
								<text class="text_money_tips">{{ $t('user.userYue') }}<span style="margin-left: 20rpx">
										${{ publicJS.toFixed(accountMoney) }}</span></text>
								<text class="text_blue_money_tips" @click="clickPay">{{ $t('user.recharge') }}</text>
							</view>
						</view>
					</view>
					<!--    兑换部分    -->
					<view class="box_change">
						<titleInput class="input-box" :maxlength="11" type="number" :title="$t('user.inputNo')"
							style="margin: 66rpx 40rpx 10rpx;" @input="changeInput" v-model="inputValue" />
						<!--    输入兑换数量      -->
						<text style="margin-left: 40rpx; margin-bottom: 20rpx">{{ $t('user.needPay') }}
							${{ calcNeedMoney }}</text>
						<!--    兑换列表      -->
						<view class="content1 rechargeList">
							<view class="rechargeItem" v-for="(item, index) in rechargePackages" :key="index"
								@click="chooseCount(item, index)" :class="chooseIndex === index ? 'active' : ''">
								<view>
									<text style="font-size: 32rpx;color: #02010E">
										{{ item.gold }}{{ $t('user.storeBalance') }}
									</text>
								</view>
								<view>
									<text style="font-size: 32rpx; color: #979797; text-align: center">
										${{ item.price }}
									</text>
								</view>
							</view>
						</view>
						<u-button :loading="isloading" type="default" class="submit-btn blue" @click="clickChange"
							style="margin-top: 40rpx;margin-bottom: 48rpx">{{ $t('user.rightChange') }}
						</u-button>
						<view style="width: 100vh;height: 12rpx;background-color: #F5F6F8" />
					</view>
					<view class="box_tip">
						<text class="text_title_bold">{{ $t('user.coinChange') }}</text>
						<text class="text_change_content">
							{{ $t('user.coinTips1') }}
						</text>
						<text class="text_title_bold">{{ $t('user.coinUse') }}</text>
						<text class="text_change_content" style="margin-bottom: 100rpx">
							{{ $t('user.coinTips2') }}
						</text>
					</view>
				</scroll-view>
			</view>
		</c-layout>
		<promptDialog ref="promptDialog"></promptDialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isloading: false,
				topMargin: 207,
				calcNeedMoney: 10, //计算出需要的钱
				accountMoney: 0, //个人余额
				accountGold: 0, //代币余额
				goldRatio: 1, //代币规则 money * goldRatio = 代币
				replaceB: 1000, //当前选中或者填写的代币数量
				currentMoney: 10, //当前选中金额
				chooseIndex: 0,
				inputValue: 1000, //输入的值
				payPwdPopShow: false, //弹出输入密码框
				rechargePackages: [{
						gold: 100,
						price: 10
					},
					{
						gold: 200,
						price: 20
					},
					{
						gold: 500,
						price: 50
					},
					{
						gold: 1000,
						price: 98
					},
					{
						gold: 2000,
						price: 198
					},
					{
						gold: 5000,
						price: 498
					}
				],
			};
		},
		mounted() {
			this.getGoldNum();
			this.calcMoneyCoin();
			this.calcTopMargin()
		},
		onLoad() {
			this.getGoldNum();
			this.calcMoneyCoin();
			this.calcTopMargin()
		},

		methods: {
			pwdclose() {
				this.isloading = false
				close()
			},
			calcTopMargin() {
				// #ifdef H5
				this.topMargin = 137;
				// #endif
				// #ifdef APP-PLUS
				this.topMargin = 207;
				// #endif
			},
			//校验密码
			payPwdPopFinish(inputPassword) {
				//校验密码
				console.log("===z val = " + inputPassword)
				uni.$http.post('/app/user/check/bank/password' + '?password=' + inputPassword).then(res => {
					console.log("===z " + JSON.stringify(res))
					if (res.code === 200) {
						this.payPwdPopShow = false
						//密码正确 扣款
						this.realChange()
					}
				})
			},
			clickPay() {
				uni.navigateTo({
					url: '/pages/recharge/recharge',
					"animationType": "slide-in-right",
					"animationDuration": 300
				})
			},
			changeInput() {
				console.log("===z " + this.inputValue)
				this.replaceB = this.inputValue;
				this.calcNeedMoney = Number(this.replaceB) / this.goldRatio
			},
			async onShow() {
				//查询余额
				this.getGoldNum();
				console.log('500001页面show');
				console.log(await !this.$u.api.verifyIsSetPwdAjax(0), '500001');
				if (!await this.$u.api.verifyIsSetPwdAjax(0)) {
					console.log(111111);
					setTimeout(() => {
						this.$refs.promptDialog.show({
							confirm: (close) => {
								uni.navigateTo({
									url: "/pages/modify/modify?type=1"
								})
								close(true)
							},
							close: (t = false) => {
								(!t) && this.publicJS.backOption()
							},
							title: this.$t('system.Hint'),
							des: this.$t('product.PleaseSet'),
							btnText: this.$t('product.GoToAdd'),
						})
					}, 1000)
				}
			},
			//计算代币和当前金额
			calcMoneyCoin() {
				let position;
				for (position in this.rechargePackages) {
					let item = this.rechargePackages[position];
					item.gold = Number(item.price) * this.goldRatio;
				}
			},
			//查询当前代币余额
			getGoldNum() {
				this.goldRatio = this.vuex_app_config.gold_coin_exchange_ratio;
				console.log("===z ra=" + this.goldRatio);
				//查询余额
				uni.$http.get(`/app/anchor/lives/gift/exchangeGold`).then((res) => {
					console.log('账户余额', res);
					this.accountMoney = res.data.userBalance;
					this.accountGold = res.data.goldAmount;
				});
			},
			//点击兑换
			clickChange() {
				this.isloading = true
				//展示密码框
				this.payPwdPopShow = true;

			},
			//实际兑换接口
			realChange() {
				let data = {
					exchangeGoldQuantity: this.replaceB,
				};
				uni.$http.post('/app/anchor/lives/gift/exchangeGold', data).then((res) => {
					console.log('充值成功', res);
					if (res.code == 200) {
						this.isloading = false
					}
					uni.showToast({
						title: uni.$t('liveBar.rechargeSuccess'),
						icon: 'none'
					});
					//查询余额
					this.getGoldNum();
				}).catch(err=>{
					this.isloading = false
				})
			},
			//输入代币数量后计算金额
			inputMoney(event) {
				let inputB = event.target.value;
				console.log("===z event.target.value=" + inputB);
				if (inputB < 10) {
					uni.showToast({
						title: "最低兑换10代币",
						icon: null
					})
					return;
				}
				this.calcNeedMoney = Number(inputB) / this.goldRatio;
				console.log("===z calcNeedMoney=" + this.calcNeedMoney);
			},
			//选择充值金币
			chooseCount(item, index) {
				this.chooseIndex = index;
				this.replaceB = item.gold;
				this.calcNeedMoney = item.price;
				this.inputValue = this.replaceB;
			},
			goBack() {
				uni.switchTab({
					url: "/pages/user/user"
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.box_b_content {
		display: flex;
		flex-direction: column;

		.submit-btn {
			width: calc(100% - 80rpx);
			height: 120rpx;
			background-color: #2935d0;
			color: #fff;
		}

		.box_title {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			/* 设置一个比较高的z-index值，保证标题区域在最上层显示 */
		}

		.box_content {
			//margin-top: 140rpx;//207
			display: flex;
			flex-direction: column;
			position: relative;

			.text_money_tips {
				font-size: 28rpx;
			}

			.text_blue_money_tips {
				font-size: 28rpx;
				color: #2934D0;
			}

			.text_bold {
				font-weight: bold;
			}

			.box_current_coin {
				display: flex;
				flex-direction: row;
			}

			.user_has_money {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 62rpx;
				margin-bottom: 30rpx;
			}

			.box_top {
				background-color: #fff;
				display: flex;
				width: 100%;
				flex-direction: column;
				box-sizing: border-box;
				justify-content: center;
				position: relative;

				.back_card_total {
					position: relative;
					top: -40rpx;
					left: 0;
					width: 670rpx;
					box-sizing: border-box;
					margin-left: 40rpx;
					margin-right: 40rpx;
					padding: 40rpx 48rpx;
					background: #FFFFFF;
					box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					display: flex;
					flex-direction: column;
				}

				.box_money_yue {
					display: flex;
					flex-direction: row;
				}

			}

			.box_change {
				background-color: #fff;
				display: flex;
				flex-direction: column;

				.box_input_num {
					display: flex;
					flex-direction: row;

					.box_input_money {
						display: flex;
						flex-direction: column;
						width: 300rpx;

						.box_need_money {
							margin-left: 20rpx;
						}
					}

					.uni-input-b {
						margin: 20rpx;
					}

					.box_tips_num_title {
						margin-top: 20rpx;
					}

					.box_tips_num_low {
						margin-top: 20rpx;
					}

				}

				.rechargeItem {
					width: 200rpx;
					height: 120rpx;
					background-color: rgba(27, 29, 41, 0.084);
					border-radius: 16rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					margin-bottom: 30rpx;

					&.active {
						border: 2rpx solid #594DC1;
					}
				}

				.rechargeList {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: space-between;
					align-items: center;
				}

				.content1 {
					width: 750rpx - 80rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-left: 40rpx;
					margin-top: 40rpx;

				}


			}

			.box_tip {
				display: flex;
				flex-direction: column;


				.text_title_bold {
					font-weight: bold;
					color: #3D3D3D;
					font-size: 36rpx;
					margin-top: 32rpx;
					margin-left: 38rpx;
					margin-right: 38rpx;
				}

				.text_change_content {
					color: #3D3D3D;
					font-size: 30rpx;
					margin-top: 28rpx;
					margin-left: 40rpx;
					margin-right: 40rpx;
				}

			}

		}

	}
</style>